<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>detail</title>
</head>
<body>
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <div class="col-9">
        ...
        <!-- 已有代码，文章正文 -->
        <div class="col-12">
            ...
        </div>

        <!-- 发表评论 -->
        <hr>
        {% if user.is_authenticated %}
            <div>
                <form
                        action="{% url 'comment:post_comment' article.id %}"
                        method="POST"
                >
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="body">
                            <strong>
                                我也要发言：
                            </strong>
                        </label>
                        <textarea
                                type="text"
                                class="form-control"
                                id="body"
                                name="body"
                                rows="2"></textarea>
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn btn-primary ">发送</button>
                </form>
            </div>
            <br>
        {% else %}
            <br>
            <h5 class="row justify-content-center">
                请<a href="{% url 'userprofile:login' %}">登录</a>后回复
            </h5>
            <br>
        {% endif %}



        <!-- 显示评论 -->
        <h4>共有{{ comments.count }}条评论</h4>
        <div>
            {% for comment in comments %}
                <hr>
                <p>
                    <strong style="color: pink">
                        {{ comment.user }}
                    </strong> 于
                    <span style="color: green">
                    {{ comment.created|date:"Y-m-d H:i:s" }}
                </span> 时说：
                </p>
                <pre style="font-family: inherit; font-size: 1em;">
{{ comment.body }}</pre>
            {% endfor %}
        </div>
    </div>

    <!-- 文章详情 -->
    <div class="container">
        <div class="row">
            <!-- 标题及作者 -->
            <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
            <!-- 新增的目录 -->
            <div class="col-3 mt-4">
                <h4><strong>目录</strong></h4>
                <hr>
                <div>
                    {{ toc|safe }}
                </div>
            </div>
        </div>
        <div class="col-12 alert alert-success">
            <div>
                作者：{{ article.author }}
                {% if user == article.author %}
                    · <a href="#" onclick="confirm_delete()">删除文章</a>
                    · <a href="{% url "article:article_update" article.id %}">
                    编辑文章
                </a>
                {% endif %}
            </div>
            <div>
                浏览：{{ article.total_views }}
            </div>
        </div>
        <!-- 新增一个隐藏的表单 -->
        <form
                style="display:none;"
                id="safe_delete"
                action="{% url 'article:article_safe_delete' article.id %}"
                method="POST"
        >
            {% csrf_token %}
            <button type="submit">发送</button>
        </form>
    </div>
    <!-- 文章正文 -->
    <div class="col-12">
        <p>{{ article.body|safe }}</p>
    </div>
    </div>
    </div>
    <script>
        function confirm_safe_delete() {
            layer.open({
                title: "确认删除",
                content: "确认删除这篇文章吗？",
                yes: function (index, layero) {
                    $('form#safe_delete button').click();
                    layer.close(index);
                }
            })
        }
    </script>

{% endblock content %}
</body>
</html>